<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网站后台管理模版</title>
		<link rel="stylesheet" type="text/css" href="../admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../admin/css/admin.css" />
	</head>

	<body>
		<div class="page-content-wrap">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<div class="layui-inline tool-btn">
						<button class="layui-btn layui-btn-small layui-btn-normal go-btn hidden-xs" data-id="0" data-url="../admin/userAdd"><i class="layui-icon">&#xe654;</i></button>
					</div>
					<div class="layui-inline">
						<input type="text" id="username"  placeholder="请输入搜索的用户名" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-inline">
						<select name="states" id="sex" lay-filter="status">
							<option value="">请选择要搜索的性别</option>
							<option value="">全部</option>
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</div>
					<button type="button" class="layui-btn layui-btn-normal" onclick="search()" >搜索</button>
				</div>
			</form>
			<div class="layui-form" id="user-list">
				<table class="layui-table" lay-even lay-skin="nob">
					<colgroup>
						<col >
						<col >
						<col >
						<col>
						<col >
						<col >
						<col >
					</colgroup>
					<thead>
						<tr>
							<th>用户名</th>
							<th>电话</th>
							<th>角色</th>
							<th>性别</th>
							<th>头像</th>
							<th>注册时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr th:each="user:${page.items}" >
							<td th:text="${user.username}"></td>
							<td th:text="${user.phone}"></td>

							<td th:text="${user.role}"></td>
							<td th:text="${user.sex}"></td>
							<td >
								<img  width="50" height="50" th:src="${user.header_url}">
							</td>
							<td th:text="${#dates.format(user.created,'yyyy年MM月dd日HH:mm')}"></td>
							<td>
								<div class="layui-inline">
									<button class="layui-btn layui-btn-mini layui-btn-normal  go-btn" th:data-id="${user.id}"  data-url="../admin/userUpdate"><i class="layui-icon">&#xe642;</i></button>
									<button class="layui-btn layui-btn-mini layui-btn-danger del-btn" th:data-id="${user.id}" data-url="../admin/user/delete"><i class="layui-icon">&#xe640;</i></button>
								</div>
							</td>
						</tr>

					</tbody>
				</table>
				<div class="page-wrap">
						<ul class="pagination">
							<li><span onclick="page(this.id)" th:id="${page.pageNum-1}"><a href="javascript:void(0)">«</a></span></li>
							<li th:each="i:${#numbers.sequence(page.home,page.end)}"  th:class="${page.pageNum==i?'active':''}"  >
								<span  onclick="page(this.id)" th:id="${i}"
									  ><a href="javascript:void(0)" th:text="${i}"></a></span>
							</li>
							<li>
								<span onclick="page(this.id)" th:id="${(page.pageNum+1)+','+page.pages}"><a href="javascript:void(0)">»</a></span>
							</li>
						</ul>
					</div>
			</div>
		</div>
		<script src="../admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../admin/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="UTF-8"></script>
		<script>

			function search() {
                $("#user-list").load("../admin/user?sex="+$("#sex").val()+"&username="+$("#username").val() + " #user-list")
            }
            var  pageNums = ''
			function page(pageNum) {
				if (pageNum.indexOf(",")!=-1){
					var split = pageNum.split(",");
					if (split[0]>split[1]){
						layer.msg('已经是最后一页了');
						return
					}else{
						pageNum = split[0];
					}
				}
				if (pageNum<=0){
					layer.msg('已经是首页了');
					return
				}
				pageNums =pageNum
				$("#user-list").load("../admin/user?pageNum="+pageNum+"&sex="+$("#sex").val()+"&username="+$("#username").val() + " #user-list")
			}
		</script>
	</body>

</html>